<template>
  <div class="outter">
    <MyHeader></MyHeader>
    <MyList :todos="todos"></MyList>
    <MyFooter
      :todoCheckedNum="todoCheckedNum"
      :todosTotalnNum="todosTotalnNum"
      @clearAllTodos="clearAllTodos"
    />
  </div>
</template>

<script>
import MyHeader from '../components/MyHeader.vue'
import MyFooter from '../components/MyFooter.vue'
import MyList from '../components/MyList.vue'

import { nanoid } from 'nanoid'
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
  name: 'TodoPage',
  components: {
    MyHeader,
    MyFooter,
    MyList
  },
  data() {
    return {
      // todos: []
    }
  },
  computed: {
    ...mapState('todoData', { todos: 'todos' }),
    todosTotalnNum() {
      return this.todos.length
    },
    todoCheckedNum() {
      return this.todos.reduce((pre, current) => {
        return pre + (current.isdone ? 1 : 0)
      }, 0)
    }
  },
  methods: {
    ...mapActions('todoData', { receive: 'receive', deltodo: 'deltodo' }),
    clearAllTodos() {
      this.todos = this.todos.filter((item) => {
        return item.isdone == false
      })
    }
  },
  watch: {
    todos: {
      deep: true,
      handler() {
        console.log('this.todos :>> ', this.todos)
        localStorage.setItem('todos', JSON.stringify(this.todos))
      }
    }
  },
  mounted() {},
  beforeDestroy() {}
}
</script>

<style lang="less">
.outter {
  // display: flex;
  // flex-direction: column;
  // align-content: center;
  box-sizing: border-box;
  background-color: #42b983;
  width: 800px;
  // height: 300px;
  padding: 20px 20px 20px 20px;
  position: relative;
  left: 50%;
  margin-left: -400px;
  border-radius: 5px;
  box-shadow: 0px 0px 20px 1px rgba(90, 90, 90, 0.2);
}
</style>
